<template>
  <div class="home">
    <div>基础案例</div>
    <!-- 从vuex中获取state数据 -->
    <div>{{$store.state.num}}</div>
    <!-- 基于计算属性进行处理 -->
    <div>{{num}}</div>
    <div>
      <button @click='handleClick'>点击</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  // data () {
  //   return {
  //     num: 0
  //   }
  // },
  computed: {
    // 不可以使用箭头函数
    // num: () => { return this.$store.state.num },
    // ------------------------------------------
    num: function () {
      return this.$store.state.num
    }
    // ES6中，如果属性值是函数，可以按照如下方式简化
    // num () {
    //   // 在js代码中，访问$store需要用this，但是模板中不需要this
    //   return this.$store.state.num
    // }
  },
  methods: {
    handleClick () {
      // this.num = this.num + 1
      // 点击按钮修改状态数据需要触发mutation
      this.$store.commit('updateNum', 1)
    }
  }
}
</script>
